<template>
<div class="">
	<div class="recommend-title">
		热销推荐
	</div>
	<ul>
		<li v-for='item of list' :key='item.id' class="item border-bottom">
			<div class="item-img-wrapper">
				<img class="item-img" :src='item.imgUrl' />
			</div>
			<div class="item-info">
				<p class="item-title">{{item.title}}</p>
				<p class="item-desc">{{item.desc}}</p>
				<button class="item-button">查看详情</button>
			</div>
		</li>
	</ul>
</div>
</template>

<script>
export default{
	name:'recommend',
	data () {
	return {
	recommend_list:[
	{title:'世界之窗',img_url:'http://img1.qunarzz.com/sight/p0/1809/87/8796d4dfe0366858a3.water.png_200x200_ca6e25bf.png',desc:'华侨城',index:'001'},
	{title:'深圳欢乐谷',img_url:'http://img1.qunarzz.com/sight/p0/1412/b5/c99be07b7b79cfb5900e03a35bc3051f.water.jpg_200x200_e839eb8e.jpg',desc:'华侨城',index:'002'},
	{title:'深圳野生动物园',img_url:'http://img1.qunarzz.com/sight/p0/1508/2e/d9363ce50a88c8c5ff5a138c67687cd4.water.jpg_200x200_1c15c8f5.jpg',desc:'华侨城',index:'003'},
	{title:'东部华侨城大侠谷',img_url:'http://img1.qunarzz.com/sight/p0/1502/15/15ca1d0eab6bf46c.water.jpg_200x200_50ca7bb1.jpg',desc:'华侨城',index:'004'}
	]
	}
	},
	props:{
		list:Array
	}
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl';
	.recommend-title{
	margin-top: .2rem;
	line-height: .8rem;
	background: #eee;
	text-indent: .2rem;
	}
	.item{
	overflow: hidden;
	display: flex;
	height: 1.9rem;
	}
	.item-img{
	width: 1.7rem;
	height: 1.7rem;
	padding: .1rem;
	}
	.item-info{
	min-width: 0;
	flex: 1;
	padding: .1rem;
	}
	.item-title{
	line-height: .54rem;
	font-size: .32rem;
	ellipsis()
	}
	.item-desc{
	line-height: .4rem;
	color: #ccc;
	ellipsis()
	}
	.item-button{
	line-height: .44rem;
	margin-top: .2rem;
	background: #ff9300;
	padding: 0 .1rem;
	border-radius: .06rem;
	color: #fff;
	}
	
</style>